<template>
  <PageWrapper :title="title" @back="goBack" :contentBackground="true" contentClass="content-class">
    <Tabs type="card" v-model:active-key="activeKey">
      <Tabs.TabPane key="success" tab="成功记录" />
      <Tabs.TabPane key="fail" tab="失败记录" />
    </Tabs>
    <BasicTable @register="registerS" v-if="activeKey === 'success'" class="!p-0"> </BasicTable>
    <BasicTable @register="registerF" v-else class="!p-0"> </BasicTable>

    <LineViewModal @register="register" :can-fullscreen="false" width="60%" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import { list, findVoList, failInfo, getInfos } from '/@/api/queryScore'
import { Tabs } from 'ant-design-vue'
import { ref, unref, computed } from 'vue'
import { useTable, BasicTable } from '/@/components/Table'
import { columnsLine, formSchemasLine } from './data'
import { useRoute, useRouter } from 'vue-router'
import { useModal } from '/@/components/Modal'
import LineViewModal from './LineViewModal.vue'
import { PageWrapper } from '/@/components/Page'

const route = useRoute()

const router = useRouter()

const activeKey = ref('success')

const importAutoId = computed(() => {
  return route.query.importAutoId
})

const title = computed(() => {
  return `${route.query.fileName}导入明细`
})

const [register, { openModal }] = useModal()

const column = computed(() => {
  return columnsLine(unref(activeKey))
})

const basicProps = {
  rowKey: 'autoId',
  columns: column,
  showIndexColumn: false,
  formConfig: {
    labelWidth: 120,
    schemas: formSchemasLine(),
    autoSubmitOnEnter: true,
    actionColOptions: { span: 3 },
  },
  searchInfo: {
    importAutoId: unref(importAutoId),
  },
  useSearchForm: true,
  bordered: true,
}

const [registerS] = useTable({ ...basicProps, api: list })

const [registerF] = useTable({ ...basicProps, api: findVoList })

// 页面左侧点击返回链接时的操作
function goBack() {
  router.go(-1)
}

async function handleView(record) {
  let data = {}
  if (unref(activeKey) === 'success') {
    data = await getInfos({ drjlAutoId: record?.importAutoId })
  } else {
    data = await failInfo({ drjlAutoId: record?.importAutoId })
  }
  openModal(true, { record: data, activeKey })
}
</script>

<style>
.content-class {
  margin: 0 !important;
  padding: 0 20px;
}
</style>
